import React from "react";
import pngStyle from '../assets/images/1.jpg'

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: '挣大钱',
      color: 'blue',
      style: {
        color: 'gray',
        fontSize: '16px'
      },
      list3:[
        {id: 1, video: '我是一号'},
        {id: 2, video: '我是二号'},
        {id: 3, video: '我是三号'},
      ],
      list:['11111111111','222222222222','3333333333333'],  

    }
  }
  render(){
    let listUser = this.state.list3.map(function(value, index){
      return <li key={index}>{value.video}</li>
    })
    return(
      <div>
        <img className="App-logo" src={pngStyle} alt=""></img>
        <img src="https://ts2.cn.mm.bing.net/th?id=ORMS.4263e0c4c39f7530b2d7095d982d20d8&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.25&p=0" alt="" /> 
        <p className={this.state.color} title="这是一个测试展示">我是一个List信息</p>
        <p className="red" title={this.state.msg}>动态的title</p>
        <label className="cursor" htmlFor="name">姓名</label>
        <input id="name" placeholder="输入姓名"></input>
        <hr />
        <p style={{'color':'red'}}>行内样式</p>
        <p style={this.state.style}>传入样式</p>
        <br />
        <ul>{ listUser }</ul>
        <hr />
        <ul>
          {this.state.list.map(function(item, index){
            return <li key={index}>{ item }</li>
          })}
        </ul>
      </div>
    )
  }
}

export default List